﻿@import "apptheme.less";

.article {
    width: 300px;
    height: 250px;

    > .win-template {
        opacity: 0;
    }

    transition: opacity 200ms ease-out;
    transition-delay: 50ms;

    &.loaded {
        > .win-template {
            opacity: 1;
        }
    }

    background-color: #CCC;
    color: white;

    &:first-child {
        width: 610px;
        height: 510px;
    }

    &:nth-child(4n), &:nth-child(3n+1) {
        width: 300px;
        height: 510px;
    }

    &:nth-child(6n), &:nth-child(4n+3) {
        width: 610px;
        height: 250px;
    }

    .win-template {
        width: 100%;
        height: 100%;
        position: relative;

        .bgimage {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        .content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            font-size: 14pt;
            background-color: rgba(0,0,0,0.95);
        }
    }
}



/*.phone .article {
    width: 100px;
    height: 50px;



    transition: opacity 200ms ease-out;
    transition-delay: 50ms;

    &:first-child {
        width: 410px;
        height: 310px;
    }

    &:nth-child(4n), &:nth-child(3n+1) {
        width: 200px;
        height: 310px;
    }

    &:nth-child(6n), &:nth-child(4n+3) {
        width: 410px;
        height: 50px;
    }

}*/
